<template>
  <div>
    <!-- 头部 卡片 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>商品分类</span>
        <!-- 添加商品分类 -->
        <el-button
          style="float: right; padding: 3px 0"
          type="primary"
          @click="dialogFormVisible = true"
        >
          添加分类</el-button
        >
        <el-dialog title="商品分类" :visible.sync="dialogFormVisible">
          <el-form :model="form" ref="form" class="form" label-width="70px">
            <el-form-item label="分类名称">
              <el-input v-model="form.cateName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="是否启用">
              <el-switch
                v-model="form.state"
                active-color="#13ce66"
                inactive-color="#ff4949"
              >
              </el-switch>
            </el-form-item>
          </el-form>
          <!-- 取消添加商品分类 -->
          <div slot="footer" class="dialog-footer">
            <el-button
              @click="
                dialogFormVisible = false;
                cancelAdd();
              "
              >取 消</el-button
            >
            <!-- 添加商品分类 -->
            <el-button
              type="primary"
              @click="
                dialogFormVisible = false;
                AdditemClass();
              "
            >
              确 定</el-button
            >
          </div>
        </el-dialog>
      </div>
      <el-table :data="cateList" highlight-current-row>
        <!-- 序号 -->
        <el-table-column type="index" label="序号"></el-table-column>
        <!-- 分类名称 -->
        <el-table-column label="分类名称">
          <template slot-scope="scope">
            <el-input
              v-if="scope.row.isEdit"
              v-model="scope.row.cateName"
            ></el-input>
            <span v-else>{{ scope.row.cateName }}</span>
          </template>
        </el-table-column>
        <!-- 是否启用 -->
        <el-table-column label="是否启用">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.state"
              :disabled="!scope.row.isEdit"
              active-color="#13ce66"
              inactive-color="#ff4949"
            >
            </el-switch>
          </template>
        </el-table-column>
        <!-- 操作 -->
        <el-table-column label="操作">
          <template slot-scope="scope">
            <!-- 编辑 -->
            <el-button
              size="mini"
              :type="scope.row.isEdit ? 'success' : ''"
              @click="handleChangEdit(scope.row)"
              >{{ scope.row.isEdit ? "完成" : "编辑" }}</el-button
            >
            <!-- 删除 -->
            <el-popconfirm
              confirm-button-text="确定"
              cancel-button-text="取消"
              icon="el-icon-info"
              icon-color="red"
              @confirm="deletItem(scope.row)"
              @cancel="cancelDeletion"
              title="这是一段内容确定删除吗？"
            >
              <el-button size="mini" slot="reference" type="danger">
                删除</el-button
              >
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="pagin">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagin.currentPage"
          :page-sizes="[3, 5, 7, 10]"
          :page-size="pagin.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import { goodsCatelist, goodsEditcate, goodsAddcate, goodsDelcate } from '@/api/goods';
export default {
  data () {
    return {
      // 表格数据
      cateList: [],
      //分页
      pagin: {
        currentPage: 1,
        pageSize: 3,
      },
      //总条数
      total: 0,
      // 添加分类数据
      form: {
        cateName: '',
        state: false
      },
      // 添加商品分类对话框
      dialogFormVisible: false
    }
  },
  methods: {
    //商品分类数据
    async getData () {
      let res = await goodsCatelist({ ...this.pagin })
      let { total, data } = res.data
      data.forEach((v => {
        // 将state的0和4 转换成true和false
        v.state = v.state === 1 ? true : false
        //添加isEdit属性为false
        v.isEdit = false
      }))
      //渲染总条数
      this.total = total
      //渲染分类数据
      this.cateList = data
    },
    // 当前页数
    handleSizeChange (val) {
      this.pagin.pageSize = val
      this.getData()
    },
    // 改变时会触发	当前页
    handleCurrentChange (val) {
      this.pagin.currentPage = val
      this.getData()
    },
    //编辑按钮
    async handleChangEdit (row) {
      row.isEdit = !row.isEdit
      let { id, cateName, state } = row
      state = state ? 1 : 0
      if (!row.isEdit) {
        let res = await goodsEditcate({ id, cateName, state })
      }
    },
    //添加商品分类
    async AdditemClass () {
      this.form.state = this.form.state ? 1 : 0
      let res = await goodsAddcate({ ...this.form })
      let { code, msg } = res.data
      if (code == 0) {
        this.getData()
        this.form.cateName = ""
        this.form.state = false
      }
    },
    //取消添加商品分类
    cancelAdd () { this.$message('已取消添加商品分类')},
    //删除分类
    async deletItem (row) {
      let res = await goodsDelcate({ id: row.id })
      let { code, msg } = res.data
      if (code == 0) {
        this.getData()
      }
    },
    cancelDeletion () { this.$message('已取消删除')}
  },
  created () { this.getData() },
}
</script>

<style lang="less" scoped>
.form {
  /deep/.el-input__inner {
    width: 300px;
  }
}
.pagin {
  margin: 30px 0;
}
/deep/.el-button {
  margin-right: 5px;
}
</style>